<template>
  <div class="statistic">
    <el-row :gutter="20" style="height: 100%">
      <el-col :span="8" style="height: 100%"><div id="pieChart"></div></el-col>
      <el-col :span="16" style="height: 100%"><div id="barChart"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "statisticChart",
  props: {
    statisticData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  mounted() {
    // this.loadPieChart(val.overall);
    // this.loadBarChart(val.organizers);
  },
  watch: {
    statisticData: {
      handler(val) {
        this.loadPieChart(val.overall);
        this.loadBarChart(val.organizers);
      },
      deep: true,
    },
  },
  methods: {
    //初始化统计图容器
    // init() {
    //   this.loadPieChart();
    //   this.loadBarChart();
    // },
    //加载扇形统计图
    loadPieChart(data) {
      let pieChart = this.$echarts.init(document.getElementById("pieChart"));
      let source = [
        { value: data.noFinish, name: "未完成" },
        { value: data.finish, name: "已完成" },
      ];
      let pieChartOption = {
        color: ["#5CB1FF", "#36CBCB"],
        title: {
          text: "总体进度",
          left: "center",
          top: 15,
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {d}%",
        },
        legend: {
          orient: "horizontal",
          bottom: "5%",
          itemWidth: 10,
          itemHeight: 10,
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "50%"],
            avoidLabelOverlap: true,
            label: {
              formatter: "{b}: {d}%",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "16",
                fontWeight: "bold",
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
                formatter: "{d}%",
              },
            },
            data: source,
          },
        ],
      };
      pieChart.setOption(pieChartOption);
    },
    //加载柱状统计图
    loadBarChart(data) {
      let barChart = this.$echarts.init(document.getElementById("barChart"));
      let res = this.handleStatisData(data);
        let barChartOption = {
          color: ["#3AA0FF", "#4ECB73", "#FAD337", "#425087"],
          title: {
            text: "各主办单位进度",
            left: "center",
            top: 15,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // Use axis to trigger tooltip
              type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
            },
          },
          legend: {
            orient: "horizontal",
            bottom: "5%",
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 15,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "15%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
          },
          yAxis: {
            type: "category",
            data: res.yAxisData,
          },
          series: [
            {
              name: "已完成",
              type: "bar",
              stack: "total",
              label: {
                show: false,
              },
              data: res.sourceData[0],
            },
            {
              name: "执行中",
              type: "bar",
              stack: "total",
              label: {
                show: false,
              },
              data: res.sourceData[1],
            },
            {
              name: "已下发",
              type: "bar",
              stack: "total",
              label: {
                show: false,
              },
              data: res.sourceData[2],
            },
            {
              name: "待下发",
              type: "bar",
              stack: "total",
              label: {
                show: false,
              },
              data: res.sourceData[3],
            },
          ],
        };
        barChart.setOption(barChartOption);
    },
    //处理统计数据
    handleStatisData(data) {
      let obj = {
        yAxisData: [],
        sourceData:[],
      };
      let copyData = [];
      for (var key in data) {
        if (Object.prototype.hasOwnProperty.call(data, key)) {
          obj.yAxisData.push(key);
          let arr = [];
          arr.push(data[key].finish);
          arr.push(data[key].execute);   
          arr.push(data[key].issued);
          arr.push(data[key].toIssue);
          copyData.push(arr);
        }
      }
      for (let i = 0; i < 4; i++) {
          let arr = [];
          copyData.forEach(item=>{
              arr.push(item[i]);
          })
          obj.sourceData.push(arr);    
      }
      return obj;
    },
  },
};
</script>

<style lang="less" scoped>
.statistic {
  width: 100%;
  height: 300px;
  #pieChart {
    width: 100%;
    height: 100%;
    border: 1px solid #d7d7d7;
  }
  #barChart {
    width: 100%;
    height: 100%;
    border: 1px solid #d7d7d7;
  }
}
</style>